<template>
  <div class="page-product-list">
    <basic-table-new
      :columns="bannerColumns"
      :pagination="bannerPagination"
      api="http://localhost:3001/admin/banner/list"
    >
      <template v-slot:tools>
        <n-button>Hello</n-button>
      </template>
    </basic-table-new>

    <basic-table-new
      :columns="todoColumns"
      api="http://localhost:3000/todos"
      mock
    >
      <template #tools>
        <n-button>World</n-button>
      </template>
    </basic-table-new>
  </div>
</template>

<script>
import { h } from "vue";

export default {
  name: "product_list",

  data() {
    return {
      columns: [
        { title: "待办事项", key: "title" },
        { title: "作者", key: "author" },
      ],

      data: [
        { title: "hello", author: "张三" },
        { title: "world", author: "李四" },
      ],

      bannerColumns: [
        {
          title: "Img",
          key: "img",
          width: 240,
          render: (row) => {
            return h("img", { src: row.img, style: "width: 200px" });
          },
        },
        { title: "Alt", key: "alt" },
        { title: "Link", key: "link" },
      ],

      bannerPagination: {
        pageSize: 2,
      },

      todoColumns: [
        { title: "待办事项", key: "title" },
        {
          title: "是否完成",
          key: "completed",
          render: (row) => h("span", null, row.completed ? "完成" : "未完成"),
        },
      ],
    };
  },
};
</script>
